import React, { Component } from 'react'
// 导入样式 -- react中的样式没有样式作用域,所以你使用样式的时候，一定要做名称不要重复
// import './style.css'
// 使用sass，需要安装sass npm i -D sass
// import './style.scss'
// 如果在react中直接写样式，没有样式作用域保护，会导航相同的样式的名称可能会冲突
// react社区，使用了另一个样式的方式 css-in-js技术 js中写css，写好的css它会有作用域，而且它是写在js中，所以js的特性它也是使用.

// 引入样式组件
import { H3Style, Btn, BtnDanger, BodyContainer } from './style'

class Child extends Component {
  render() {
    return (
      <div>
        {/* 调用样式组件，记得首字母要大写 */}
        <H3Style>
          <span>1111</span>
          <span>我是子组件</span>
        </H3Style>
        <hr />
        <Btn>我是一个按钮</Btn>
        <BtnDanger>我是一个按钮</BtnDanger>
        <hr />
        {/* 通过属性向样式定义中传入值，来改变样式 */}
        <BodyContainer color="blue">尽管 portal 可以被放置在 DOM</BodyContainer>
        <BodyContainer fontSize="20">尽管 portal 可以被放置在 DOM</BodyContainer>
      </div>
    )
  }
}

// class Child extends Component {
//   render() {
//     return (
//       <div className="child">
//         {/* <h3 className="child-title">我是子组件</h3> */}
//         <h3>我是子组件</h3>
//       </div>
//     )
//   }
// }

export default Child
